<script setup lang="ts">
import * as zod from "zod";
import { toFormValidator } from "@vee-validate/zod";
import { Field, ErrorMessage } from "vee-validate";

// 定义验证规则

// zod.string 表示的是 username 属性对应的值必须是字符串类型且必填
// required_error 当属性没有值的时候显示的错误信息
// invalid_type_error 当属性的类型不匹配的时候显示的错误信息
const formValidator = toFormValidator(
  zod.object({
    username: zod
      .string({
        required_error: "请输入用户名",
        invalid_type_error: "用户名必须是字符串",
      })
      .min(2, { message: "用户名的长度不能小于2" })
      .max(6, { message: "用户名的长度不能大于6" }),
    password: zod
      .string({
        required_error: "请输入密码",
        invalid_type_error: "密码必须是字符串",
      })
      .regex(/^\w{6,24}$/, "密码最少6位最多24位"),
  })
);

const { handleSubmit } = useForm({ validationSchema: formValidator });

const onSubmit = handleSubmit((values) => {
  console.log(values);
});
</script>

<template>
  <form class="container mt-6" @submit="onSubmit">
    <Field
      name="username"
      class="field"
      as="div"
      v-slot="{ field }"
      :validateOnInput="true"
    >
      <label class="label">用户名</label>
      <div class="control has-icons-left">
        <input
          v-bind="field"
          class="input"
          type="text"
          placeholder="请输入用户名"
        />
        <span class="icon is-small is-left">
          <i class="fas fa-user"></i>
        </span>
      </div>
      <ErrorMessage name="username" v-slot="{ message }">
        <p class="help is-danger">{{ message }}</p>
      </ErrorMessage>
    </Field>
    <Field class="field" name="password" as="div" v-slot="{ field }">
      <label class="label">密码</label>
      <div class="control has-icons-left">
        <input
          v-bind="field"
          class="input"
          type="password"
          placeholder="请输入密码"
        />
        <span class="icon is-small is-left">
          <i class="fas fa-key"></i>
        </span>
      </div>
      <ErrorMessage name="password" v-slot="{ message }">
        <p class="help is-danger">{{ message }}</p>
      </ErrorMessage>
    </Field>
    <div class="field is-grouped">
      <div class="control">
        <button type="submit" class="button is-link">提交</button>
      </div>
      <div class="control">
        <button type="button" class="button is-link is-light">重置</button>
      </div>
      <div class="control">
        <button type="button" class="button is-link is-light">
          设置表单值
        </button>
      </div>
    </div>
  </form>
</template>

<style lang="less" scoped>
@import "https://bulma.io/vendor/fontawesome-free-5.15.2-web/css/all.min.css";
@import "https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css";
</style>
